<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>23215220128-张子雄</title>
    <link rel="stylesheet" href="./css/audio.css" />

  </head>
  <body background="./img/bg0.png">
    <!-- 上半部分 -->
    <div class="upper-container">
      <!-- 唱片 -->
      <div class="record-container">
        <div class="record-bg">
          <!-- 旋转唱片 -->
          <div class="rotate-play"></div>
        </div>
      </div>

      <!-- 歌名介绍 -->
      <div class="introduction-container">
        <div class="text-container">
          <div class="music-title">歌曲名称</div>
          <div class="author-container">作者：</div>
          <span class="author-name">歌手名</span>
        </div>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="audio-box">
  
      <!-- 放所有控件 -->
      <div class="audio-container">
        <audio id="audioTag"></audio>

        <!-- 进度条 -->
        <div class="a-progress">
          <!-- 播放进度 -->
          <div class="pgs-total">
            <div class="pgs-play" id="progress" width="0%",style="width:0%"></div>
          </div>
        </div>
        <!-- 下排控制按钮 -->
        <div class="a-controls">
          <!-- 时间 -->
          <div class="time-container">
            <span class="played-time">00:00</span>&nbsp;/&nbsp;
            <span class="audio-time">00:00</span>
          </div>
          <!-- 中间按钮 -->
          <div class="center-btn-container">
            <!-- 播放模式切换 -->
            <div class="center-icon mode"></div>

            <!-- 上一首 -->
            <div class="center-icon s-left"></div>
            <!-- 播放/暂停 -->
            <div class="center-icon icon-play"></div>
            <!-- 下一首 -->
            <div class="center-icon s-right"></div>
            <!-- 音量调节 -->
            <div class="center-icon volumn"></div>
            <!-- 音量进度条 -->
            <input
            id="volumn-togger"
              type="range"
              name="change"
              value="70"
              min="0"
              max="100"
              step="1"
            />
          </div>
          <!-- 后部按钮 -->
          <div class="bottom-btn-container">
            <!-- 列表 -->
            <div class="bottom-icon list"></div>
            <!-- 倍数 -->
            <div class="speed">1.0X</div>
            <!-- mv -->
            <div class="bottom-icon MV"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 播放列表 -->
     <div class="close-list"></div>

     <div class="list-card-show music-list">
      <div class="music-list-container">
        <div class="music-list-title">播放列表</div>
        <hr class="line">
        <div class="all-list">
          <div id="music0">洛春赋</div>
           <div id="music1">Yesterday</div>
            <div id="music2">江南烟雨色</div> 
            <div id="music3">Vision</div>
        </div>
     </div>
     </div>
  </body>
</html>
<script src="./js/music.js"></script>